<template>
  <view class="container">
    <view v-for="(item2,i2) in data" :key="i2" class="wai-box">
      <view class="li-box">
        <text class="time">{{item2.time}}</text>
        <view class="content">
          <text class="text">{{item2.text}}</text>
          <view v-if="item2.imgUrl.length > 0"  class="img" >
          <view class="img-box" v-for="(im,index) in item2.imgUrl" @click="preview(item2.imgUrl,index)" :key="index">
            <image  :src="im"  mode="scaleToFill" style="height: 100%; width: 100%;" ></image>
          </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "timeline",
    data() {
      return {

      };
    },
    props: {
      data: {
        type: Array,
        default: []
      }
    }
    ,
    methods:{
      preview(arr,i){
        uni.previewImage({
          current: i,
          urls: arr
        })
      }
    }
  }
</script>

<style lang="scss">
.container{
  width: 90%;
  margin: auto;
  .wai-box{
    border-left: 2px solid #aaa;
    box-sizing: border-box;
    .li-box{
      padding: 20px 15px;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-items: flex-start;
      .time{
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;
      &::before{
        position: relative;
        left: -22px;
        content: '';
        border: 2px solid #c00;
        box-shadow: 0 0 3px 6px #ff3c59;
        width: 10px;
        height: 10px;
        float: left;
        display: block;
        background: red;
        border-radius: 50%;
      }
      }
      .content{
        width: 100%;
        border-radius: 10px;
        border: 2px solid #efefef;
        box-shadow: 1px 1px 2px 2px #efefef;
        padding: 10px;
        .text{
              letter-spacing: 0.2rem;
              font-size: 1rem;
              background-image: -webkit-linear-gradient( left,#E6D205 , #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
              -webkit-text-fill-color: transparent;
              -webkit-background-clip: text;
              -webkit-animation: maskedAnimation 4s infinite linear;
              -webkit-background-size: 200% 100%;
        }
        @keyframes maskedAnimation {
            0% {
                background-position: 0 0;
            }
        
            100% {
                background-position: -100% 0%;
            }
        }
        .img{
            margin-top: 10px;
            display: flex;
            justify-items: flex-start;
            flex-wrap: wrap;
          .img-box{
            width: 30%;
            height: 180rpx;
            border: 1px solid #ccc;
            padding: 1px;
            margin: 1px;
          }
        }
      }
      
    }
  }
}
</style>
